<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>提交作业</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/student_homework_item.css">
	<link rel="stylesheet" href="../css/main.css">

	<style>
		.del {
			position: absolute;
			right: 1px;
			top: 1px;
			z-index: 99;
		}
	</style>

</head>

<body>
	<div id="vue-root">
		<div class="header">
			<div class="header_title">作业详情</div>
			<a onclick="history.back()">
				<img src="../image/return.png" alt="" class="return">
			</a>
		</div>
		<div id="homework_info">
			<div class="homework_info">
				<div class="info">课程:</div>
				<div class="megges" v-text="homework.courseName"></div>
			</div>
			<div class="homework_info">
				<div class="info">时间:</div>
				<div class="megges" v-text="homework.publishTime"></div>
			</div>
			<div class="homework_info">
				<div class="info">标题:</div>
				<div class="megges" v-text="homework.title"></div>
			</div>
			<div class="homework_info" style="position: relative;">
				<div style="position: absolute; bottom: 0;margin-left: 2%;">内容:</div>
				<div class="megges" v-text="homework.content" style="margin-left: 4em;"></div>
			</div>

			<div class="img_box">
				<img v-for="pic in homework.pics" :src="getImg(pic)" style="margin-top: 2%;" class="imgs" />
			</div>
		</div>
		<div>
			<textarea class="text" placeholder="请回答" :disabled="homework.status!=0"
				v-model="homework.answer"></textarea>
		</div>

		<div class="img_box" style="position: relative;" v-for="(pic,index) in homework.studentPics" :key="index">
			<img :src="getImg(pic)" class="imgs" />
			<img src="/image/del.svg" class="delete" @click="del(index)" v-if="homework.status==0" />
		</div>

		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" name="file" ref="file" accept="image/*" @change="upload">
		</form>

		<div id="File" v-if="homework.status==0">
			<label @click="choose">
				<img src="../image/upload.png">
			</label>
		</div>

		<div>
			<textarea class="text" disabled="disabled" :value="homework.reply" v-if="homework.status==2"></textarea>
		</div>

		<div class="offer" @click="submit" v-if="homework.status==0">提交</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	
	<script src="/wechat/js/wx.js"></script>

	<script>

		var student = getStudent();

		function getPerson() {
			return student;
		}

		var app = new Vue({
			el: '#vue-root',
			data: {
				homework: {
					status: 1,
					pics: [],
					studentPics: []
				}
			},
			created: function () {
				if (student) {
					this.getData();
				} else {
					axios.get('/s/me').then(function (res) {
						student = res.data;
						this.getData();
					}.bind(this));
				}
			},
			methods: {
				getData: function () {
					var id = params().id;
					if (!id) return;
					axios.get('/s/homework/' + id).then(function (res) {
						var data = res.data;
						data.pics = data.pics ? data.pics.split('|') : [];
						data.studentPics = data.studentPics ? data.studentPics.split('|') : [];
						this.homework = data;
					}.bind(this));
				},
				submit: function () {
					if (!confirm('确认提交？')) return;

					var homework = {
						homeworkId: this.homework.id,
						answer: this.homework.answer,
						pics: this.homework.studentPics.join('|')
					};
					axios.post('/s/homework', homework).then(function (res) {
						this.homework.status = 1;
						alert('你已提交了作业');
					}.bind(this));
				},
				upload: function () {
					axios.post('/s/upload/homework?schoolId=' + student.schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.homework.studentPics.push(res.data.data);
						}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + student.schoolId + '/homework/' + pic;
				},
				del: function (index) {
					if (confirm('确定删除该图片？'))
						this.homework.studentPics.splice(index, 1);
				},
				choose: function () {
					if (wxReady) {
						wxChooseImg(3, 'homework', function (pic) {
							this.homework.studentPics.push(pic);
						}.bind(this));
					} else {
						this.$refs.file.click();
					}
				}
			}
		});

	</script>

</body>

</html>